<template>
    <div>
        <Row>
            <Col span="24">
                <baidu-map class="bm-view" 
                    :zoom="zoom" 
                    :scroll-wheel-zoom="true"
                    @click="clickMap"
                    @ready="handler"
                    ak="HyWDZdbTWuZnY9dmbVbSCtpzN2j7LzPd">

                    <!-- 缩放控件,右上角 -->
                    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
                    <!-- 城市列表,这里暂时去掉,因为和搜索功能同时使用会报错 -->
                    <!-- <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT" :offset="{width:180,height:10}"></bm-city-list> -->
                    <!-- 定位组件 -->
                    <!-- <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="false">
                    </bm-geolocation> -->

                    <!-- 搜索 -->
                    <!-- <bm-control :offset="controlOffset">
                        <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 1}">
                            <input type="text" class="bm-search-input" name="search" placeholder="请输入地名关键字">
                        </bm-auto-complete>
                    </bm-control> -->
                    <!-- <bm-local-search :keyword="keyword" :auto-viewport="true" ></bm-local-search> -->
                </baidu-map>
            </Col>
        </Row>
    </div>
</template>
<script>
    import {BaiduMap,BmNavigation,BmControl,BmAutoComplete,BmLocalSearch} from 'vue-baidu-map';
    import $ from 'jquery';
	export default {
		props: {
            //初始化地图组件经纬度
            center: {
                type: [String, Object],
                default: function () {
                    return {lng: 116.426903, lat: 39.903269};
                }
            },
            iconUrl: {
                type: String,
                default:'http://47.92.105.182/ws/img/view/918393454302728192'
            }
        },
        //监控内容变化
        watch: {
            
        },
        data() {
            return {
                //地图zoom
                zoom:15,
                //是否开启滚轮
                scrollWheelZoom:true,
                //地图对象
                map:null,
                //地图搜索
                // keyword:'',
                //组件位置偏移
                controlOffset:{width:10,height:10}
            }
        },
        //注册局部组件 
        components:{
            BaiduMap,
            //定位组件,右下角
            //BmGeolocation,
            //缩放控件,右上角
            BmNavigation,
            //城市列表控件,左上角(城市控件只在高度足够高的时候生效)
            //BmCityList,
            //自定义控件
            BmControl,
            //自动填充
            BmAutoComplete,
            //本地检索
            BmLocalSearch

        },
        //初始化方法
        mounted() {

        },
        watch: {
            center(val){
                this.setCenterAndMarker();
            }
        },
        methods: {
            //百度地图初始化回调函数
            handler({BMap, map}){
                this.map = map;
                //组件加载完成的时候删除搜索地址多余结果(地图底部)
                this.$nextTick(function() {
                    $('.BMap_noprint').next().remove();
                });
                this.setCenterAndMarker();
            },
            //设置中心点
            setCenterAndMarker(){
                const _this = this;
                this.$nextTick(function() {
                    let myGeo = new BMap.Geocoder();
                    myGeo.getPoint(_this.center, function(point){
                        if (point) {
                            _this.map.clearOverlays();
                            _this.map.centerAndZoom(point, 16);
                            _this.map.addOverlay(new BMap.Marker(point));
                        }else{
                            // alert("您选择地址没有解析到结果!");
                        }
                    }, "北京市");
                });
            },
            //地图移动结束时触发此事件,可以获取经纬度,使用@moveend
            syncCenterAndZoom (e) {
                // const {lng, lat} = e.target.getCenter();
                // console.log("获取到的经纬度为:"+lng + ",," + lat);
                // this.center.lng = lng
                // this.center.lat = lat
                // this.zoom = e.target.getZoom();
            },
            //点击地图事件
            clickMap(e){
                const _this = this;
                //清除所有标注
                this.map.clearOverlays();
                //设置标注图片
                //let myIcon = new BMap.Icon(this.iconUrl, new BMap.Size(80,80));
                //let marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat),{icon:myIcon});
				let marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));
                //給点击的坐标添加标注
                this.map.addOverlay(marker);
                //获取中文地址
                new BMap.Geocoder().getLocation(e.point, function(rs) {
                    let address = rs.address;
                    _this.$emit('clickMapEvent',{address:address,lng:e.point.lng,lat:e.point.lat});
                });
            },

        }
	}
</script>
<style type="text/css">
    .bm-view {
      width: 100%;
      height: 400px;
    }
    .bm-search-input{
    	font: 13.3333px Arial!important;
    }

</style>

